import { cn } from "@/common/cn";

const STATUS = {
  primary: "checkbox-primary",
  secondary: "checkbox-secondary",
  accent: "checkbox-accent",
  neutral: "checkbox-neutral",
  success: "checkbox-success",
  warning: "checkbox-warning",
  info: "checkbox-info",
  error: "checkbox-error",
};

export type CheckboxStatus = keyof typeof STATUS;

const SIZE = {
  xs: "checkbox-xs",
  sm: "checkbox-sm",
  md: "checkbox-md",
  lg: "checkbox-lg",
  xl: "checkbox-xl",
};

export type CheckboxProps = React.DetailedHTMLProps<
  React.InputHTMLAttributes<HTMLInputElement>,
  HTMLInputElement
> & {
  status?: CheckboxStatus | undefined;
  size?: Size | undefined;
};

export default function Checkbox({ status, size, className, ...p }: CheckboxProps) {
  return (
    <input
      type="checkbox"
      className={cn("checkbox", status && STATUS[status], size && SIZE[size], className)}
      {...p}
    />
  );
}
